<template>
    <div class="manual">
        <el-form :model="caseSealApplyfor" label-width="80px" label-position="top" style="width: 1000px;margin: 0 auto">
            <el-container>
                <el-form-item label="用印事项">
                    <el-select @change="handleChangeItem" v-model="caseSealApplyfor.applyforUsingTheItem" :value="caseSealApplyfor.applyforUsingTheItem" style="width: 450px">
                        <el-option
                                :key="recordFiles.id"
                                v-for="recordFiles in recordFilesList"
                                :label="recordFiles.fileName"
                                :value="recordFiles.fileName"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收函人/委托人" style="margin-left: 100px">
                    <el-input v-model="caseSealApplyfor.sendPerson" style="width: 450px" readonly></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="领用人">
                    <el-input v-model="caseSealApplyfor.applyforRecipient" style="width: 450px" readonly></el-input>
                </el-form-item>
                <el-form-item label="案件" style="margin-left: 100px">
                    <el-input v-model="caseSealApplyfor.caseNo" @focus="centerDialogVisible = true" style="width: 450px" :disabled="checkActive"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item label="相关文件">
                    <el-upload
                            name="multipartfile"
                            action="http://localhost/upload"
                            :headers="{token:this.$store.state.token}"
                            :data="{folder:'caseFiles'}"
                            class="upload-demo"
                            ref="upload"
                            :limit="1"
                            :multiple="false"
                            :auto-upload="false"
                            :on-success="handleUploadSuccess">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </el-form-item>
                <el-input v-model="caseSealApplyfor.filePath" v-show="false"></el-input>
            </el-container>

            <el-container>
                <el-form-item label="备注">
                    <el-input v-model="caseSealApplyfor.remark" type="textarea" style="width: 1000px"></el-input>
                </el-form-item>
            </el-container>

            <el-container>
                <el-form-item>
                    <el-button type="primary" @click="handleSave">确认提交</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="goBack" v-if="checkActive" style="margin-left: 20px">返回</el-button>
                </el-form-item>
            </el-container>
        </el-form>

        <el-dialog
                :visible.sync="centerDialogVisible"
                width="70%"
                center>
            <chose-case @setLaw="handleChangeLaw"></chose-case>
        </el-dialog>
    </div>
</template>

<script>
    //引入组件
    const ChoseCase = () => import('../../common/Case/ChoseCase.vue')
    //引入立案文件service
    import {RecordFileService} from "../../../model/gs/RecordFileService";
    import {CaseSealApplyforService} from "../../../model/gs/CaseSealApplyforService";
    import CaseLawService from '../../../model/gs/CaseLawService.js'
    //获取实例
    const recordFileService = RecordFileService.getInstance()
    const caseSealApplyforService = CaseSealApplyforService.getInstance()
    const caseLawService = CaseLawService.getInstance()

    export default {
        props:['law','active'],
        data() {
            return {
                centerDialogVisible: false,
                caseSealApplyfor:{
                    sendPerson:'',
                    caseid:'',
                    applyforRecipient:'',
                    caseNo:'',
                    applyforUsingTheItem:''
                },
                recordFilesList:[],
                caseLawList:[]
            }
        },
        methods:{
            //获取所有文件类型
            getRecordFiles() {
                recordFileService.list().then(response => {
                    if(response.data.code === 0){
                        this.recordFilesList = response.data.data
                    }
                })
            },
            //获取所有案件
            getCaseLaws(){
                caseLawService.list().then(response => {
                    if(response.data.code === 0){
                        this.caseLawList = response.data.data
                    }
                })
            },
            handleUploadSuccess(response){
                this.caseSealApplyfor.filePath = response.data
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            //保存的方法
            handleSave(){
                //校验
                if(!caseSealApplyforService.check(this.caseSealApplyfor)){
                    return
                }
                //保存
                caseSealApplyforService.save(this.caseSealApplyfor).then(response => {
                    if(response.data.code === 0){
                        this.$message.success({
                            message:'提交成功',
                            duration:2000
                        })
                    }
                })
            },
            //改变案件的方法
            handleChangeLaw(law){
                this.caseSealApplyfor.caseNo = law.caseNo
                this.caseSealApplyfor.caseid = law.id
                this.caseSealApplyfor.sendPerson = law.caseWtr
                this.caseSealApplyfor.applyforRecipient = law.caseSubmitter
                this.centerDialogVisible = false
            },
            //改变使用事项的方法
            handleChangeItem(){
                try {
                    this.recordFilesList.forEach(item => {
                        if(item.fileName == this.caseSealApplyfor.applyforUsingTheItem){
                            this.caseSealApplyfor.typeid = item.fileTypeId
                            throw new Error()
                        }
                    })
                }catch (e) {
                    return e
                }
            },
            setObject(){
                this.$set(this.caseSealApplyfor,'caseid',this.law.id)
                this.$set(this.caseSealApplyfor,'caseNo',this.law.caseNo)
                this.$set(this.caseSealApplyfor,'sendPerson',this.law.caseWtr)
                this.$set(this.caseSealApplyfor,'applyforRecipient',this.law.caseSubmitter)
            },
            goBack(){
                this.$emit('back')
            }
        },
        computed:{
            checkActive:{
                get(){
                    return this.active!=null && this.active!=undefined
                }
            }
        },
        watch:{
            law:{
                handler(){
                    this.setObject()
                },
                deep:true
            }
        },
        created(){
            this.getRecordFiles()
            this.getCaseLaws()
            if(this.law!=null && this.law!=undefined){
                this.setObject()
            }
        },
        components:{
            ChoseCase
        }
    }
</script>

<style scoped>
    .manual{
        width: 100%;
    }
</style>
